{% extends '::base.html.twig' %}
{% block title %}Edición de Areas{% endblock %}

{% block greensectiontitle %}Area{% endblock %}

{% block greensectionbody %}

<form id="editForm" action="{{ entity.id ? path('area_update', { 'id': entity.id }) : path('area_create') }}" method="post" {{ form_enctype(edit_form) }}>

    {{ form_errors(edit_form) }}
    {{ form_row(edit_form.nombre) }}
    {{ form_row(edit_form.descripcion) }}                
  

{% macro prototype(carrera) %}
    <tr>
        <td class="center">{{ form_widget(carrera.codigo) }}</td>
        <td>{{ form_widget(carrera.nombre) }}</td>
        <td><div id="controls" style="text-align: center;"><a title="Quitar carrera del área" href="#">Quitar</a></div></td>
    </tr>
{% endmacro %}  
  



    
 

    
    <div id="records_table" class="greenTableMargin">
        
    <table id="carreras-table" padding="0" margin="0">
        <thead>
            <tr>
                <th colspan="3">
                    <div id="controls">
                        Carreras
                        <a title="Agregar una carrera al área" href="#" id="add-carrera" style="float:right;">Agregar</a>
                    </div>
                </th>
                
            </tr>
            <tr>
                <th>Codigo</th>
                <th>Nombre</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody id="carreras-table-body"
               codigo-data-prototype="{{ form_widget(edit_form.carreras.get('prototype').codigo) | e }}"
               nombre-data-prototype="{{ form_widget(edit_form.carreras.get('prototype').nombre) | e }}">
            {# iterate over each existing carrera and render its field: codigo, nombre, universidad #}
            {% for carrera in edit_form.carreras %}
                {{_self.prototype(carrera)}}
            {% endfor %}
        </tbody>
    </table>
        </div>
    
    <div id="controls">
        <a title="Guardar datos y carreras del área" id="saveButton" href="#">Guardar</a>
        <a title= "Cancelar y volver a la lista de áreas" href="{{ path('area') }}">Cancelar</a>
    </div>
   
</form>     
{% endblock %}


{% block javascripts %}
<script type="text/javascript">
    // realiza un seguimiento de cuántos campos de correo electrónico se han pintado
    var carrerasCount = '{{ edit_form.carreras | length }}';
    
    jQuery('#add-carrera').click(function() {
        var carrerasTableBody = jQuery('#carreras-table-body');

        var codigoPrototype = carrerasTableBody.attr('codigo-data-prototype');
        var nombrePrototype = carrerasTableBody.attr('nombre-data-prototype');

        // sustituye el "__name__" usado en el id y name del prototipo 
        codigoWidget = codigoPrototype.replace(/\$\$name\$\$/g, carrerasCount);
        nombreWidget = nombrePrototype.replace(/\$\$name\$\$/g, carrerasCount);
        

        carrerasCount++;

        // crea un nuevo elemento lista y lo añade a nuestra lista
        var codigoTableCell = jQuery('<td class="center"></td>').html(codigoWidget);
        var nombreTableCell = jQuery('<td></td>').html(nombreWidget);

        var newRow = jQuery($('<tr>'));
        var endRow = jQuery($('</tr>'));
        var removeCell = $('<td><div id="controls" style="text-align: center;"><a title="Quitar carrera del área" href="#">Quitar</a></div></td>');

        newRow.appendTo(carrerasTableBody);
        codigoTableCell.appendTo(newRow);
        nombreTableCell.appendTo(newRow);
        removeCell.appendTo(newRow);
        endRow.appendTo(carrerasTableBody);
        jQuery('.alfa').alpha({allow:" "});
        jQuery('.alfanumerico').alphanumeric();

        return false;
    });
    
    jQuery('#carreras-table-body').on('click', 'a' ,function(event) {
        event.preventDefault();
    
        if ($(this).text() === "Quitar") {
            $(this).closest('tr').remove();
        }
    });
</script>
{% endblock %}

